<template>
<div id="app">
    <h2>todolist</h2>
    <div style="width:1000px">
        <!--例子1:按回车新增-->
        <div style="display:inline-block">
            <input id="add-input" v-model="todoText" v-on:keyup.enter="addTodo" @keyup.ctrl.67="addTodo" placeholder="请输入按回车新增?" />
        </div>
        <!--例子2:v-model语法糖-->
        <!-- <div style="display:inline-block">
        <input id="add-input" 
        v-bind:value="todoText"  
        v-on:input="todoText= $event.target.value" 
        v-on:keyup.enter="addTodo" 
        placeholder="请输入按回车新增?" />
      </div> -->
        <!--例子3:正常点击按钮添加-->
        <div style="display:inline-block;vertical-align: middle;">
            <button style="width:80px;height:39px" @click="addTodo">正常按钮添加</button>
        </div>
        <!--例子4:事件修饰符的作用-->
        <div style="display:inline-block" @click="doIt">
            <a href="http://www.baidu.com" style="width:50px;height:39px" @click.prevent.stop="addTodo">事件修饰符添加</a>
        </div>
    </div>
    <ul>
        <!--例子5:子组件的应用-->
        <!--例子6:v-for的使用-->
        <todo v-for="(todoItem1, index1) in todos" :key="todoItem1.id" :todoItem="todoItem1" :index="index1" @deleteTodo="deleteTodo1"></todo>

        <div v-for="(todoItem1) in todos" :key="todoItem1.id">
            <input v-model="todoItem1.text" />
        </div>
    </ul>
</div>
</template>

<script>
// import Todo from "./components/todo";
export default {
    name: "todoList",
    // 局部注册组件
    // components: {
    //   Todo,
    // },
    data() {
        // 自定义变量
        return {
            todoText: "",
            todos: [],
        };
    },
    methods: {
        // 新增一列
        addTodo() {
            this.todos.push({
                id: new Date().getTime(),
                // 根据输入的内容生成
                text: this.todoText,
                // 初始状态为false
                done: false,
            });
            // 清空输入内容
            this.todoText = "";
        },
        // 删除一列
        deleteTodo1(index) {
            // 根据序号删除数组对应位置
            this.todos.splice(index, 1);
        },
        doIt() {
            alert(1);
        }
    },
};
</script>

<style scoped>
body {
    font-family: Helvetica, sans-serif;
}

#app {
    width: 800px;
    margin: 30px auto;
}

#add-input {
    width: 750px;
    height: 35px;
    padding: 0 5px;
}

ul {
    list-style: none;
    padding: 0;
}
</style>
